<template>
    <div class="login">
        <div class="login_img_logo">
            <img src="../assets/logo.jpg" alt="">
        </div>
        <div class="login_f">
            <div class="login_f_line">
                <div class="login_f_t">手机号</div>
                <div class="login_f_input1">
                    <input type="number" v-model="mobile" title="手机号">
                </div>
            </div>
            <div class="login_f_line login_f_code">
                <div class="login_f_t">验证码</div>
                <div class="login_f_input2"><input type="number" v-model="verify"></div>
                <div>
                    <button class="login_codebtn" @click="getvcode()" v-show="show">获取验证码</button>
                    <span v-show="!show" class="login_count">{{count}} s</span>
                </div>
            </div>
            <button class="login_submit" @click="submit()">开通</button>
            <div class="login_action">注册即表示您已阅读并同意<a class="login_font_r">《会员协议》{{ref_code}}</a>未注册手机号登录
后将自动注册为CAR PLUS会员。</div>
        </div>
    </div>
</template>
<script>
import { Field,Button  } from 'mint-ui';
import cookie from "../../store/modules/cookie"
export default {
    components: {
        Field,
        Button
    },
    data(){
        return{
            mobile:"",
            verify:"",
            show: true,
            count: '',
            timer: null,
            timeconut:10,
            openid:0,
            ref_code:0
        }
    },
    created(){
        this.ref_code = this.$route.params.ref_code
    },
    methods:{
        inverted (){
            let that = this
            if (!that.timer) {
                that.count = that.timeconut;
                that.show = false;
                that.timer = setInterval(() => {
                if (that.count > 0 && that.count <= that.timeconut) {
                    that.count--;
                } else {
                    that.show = true;
                    clearInterval(that.timer);
                    that.timer = null;
                }
                }, 1000)
            }
        },
        getvcode(){
            let that = this
            if(!that.mobile){
                this.$messagebox({
                   title:'提示',
                   message: "手机号不能为空"
               })
            }else if(!(/^1[345789]\d{9}$/.test(that.mobile))){
               this.$messagebox({
                   title:'提示',
                   message: "手机格式不正确"
               })
            }else{
                that.$http.get('user/member/sendSms',{mobile:that.mobile}).then((res)=>{
                    if(res.code == 0){
                        that.inverted()
                    }else{
                        that.$messagebox({
                            title: '提示',
                            message: res.msg
                        })
                    }
                }).catch((res)=>{
                    console.log(res)
                })
            }
        },
        submit(){
            let that = this
            let data = {}
            that.openid  = cookie.getCookie('openid')
            if(!(/^\d{4}$/.test(that.verify))){
                that.$messagebox({
                    title: '提示',
                    message: "请输入正确的验证码"
                })
            }else{
                if(that.ref_code != 0){
                    data = {
                        mobile:that.mobile,
                        openid:that.openid,
                        vcode:that.verify,
                        ref_code:that.ref_code
                    }
                }else{
                    data = {
                        mobile:that.mobile,
                        openid:that.openid,
                        vcode:that.verify
                    }
                }
                that.$http.get('user/member/register',data).then((res)=>{
                    if(res.code == 0){
                        that.$router.push({
                            path:'/'
                        })
                    }else{
                        that.$toast(res.msg)
                    }
                }).catch((res)=>{
                    that.$toast(res.msg)
                })
            }

        },
    }
}
</script>
<style scoped>
    .login input{width: 98%;border: none;}
    .login_img_logo{
        width: 522px;
        height: 203px;
        margin: 276px auto;
    }
    .login_img_logo img{width: 100%;height: 100%;}
    .login_f_line{
        height: 161px;
        line-height: 161px;
        margin: 0 48px;
        border-bottom: 1px solid #cccccc;
        font-size:48px;
    }
    .login_f_t{
        float: left;
        width: 18%;
    }
    .login_f_input1{
        float: left;
        width: 80%;
    }
    .login_f_input2{
        float: left;
        width: 50%;
    }
    .login_f_input1 input,.login_f_input2 input{
        line-height: 144px;
        font-size: inherit;
    }
    .login_codebtn{
        border: 1px solid #020202;
        color: #000;
        background-color: #fff;
        height: 96px;
        line-height: 96px;
        padding:0 5px
    }
    .login_submit{
        background: #22CFB6;
        color: #fff;
        width: 90%;
        height: 135px;
        border: none;
        letter-spacing: 13px;
        margin: 150px 5%;
    }
    .login_action{
        color: #9A9A9A;
        width: 90%;
        margin: 7px 5%;
        text-align: left;
        font-size: 33px;
    }
    .login_font_r{color: #FF0D3C;}
    .login_count{
        border: 1px solid #020202;
        color: #000;
        background-color: #fff;
        height: 96px;
        line-height: 96px;
        width: 264px;
        display: inline-block;
        text-align: center;
    }
</style>
